<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
    // 1.基本使用: let 变量名
    let a;
    console.log(a); // undefined
    let b = 10; // 声明时进行赋值
    console.log(b); // 10

    // 特点1：不能重复声明
    var x = 10;
    var x = 20;
    console.log(x); // 20

    let n = 100;
    // let n = 200; // 语法错误：SyntaxError: Identifier 'n' has already been declared

    // 2.不存在变量提升与暂时性死区
    console.log(m); //报错：变量声明之前不能使用  
    // ReferenceError: Cannot access 'm' before initialization
    let m = 100; // 在声明之前都是暂时性死区

    let y = 10;
    function fun(){
        console.log(y); // 报错：Cannot access 'y' before initialization

        let y = 20;
    }
    fun();

    // 3.块级作用域  {}  只能在{}中使用
    // if switch for while 函数         不包括对象
    if(1){
        let a = 10;
    }
    // console.log(a); // a is not defined

    for(let i = 1; i <= 5; i++){
        console.log(i);
    }
    // console.log(i); // i is not defined
    // 使用let可以避免全局变量的污染

    {
        let b = 10;
        {
            console.log(b,111); // 10 
            {
                let b = 30;
                console.log(b,2222); // 30
            }
        }
    }
    // 作用域链：js的向上查找机制
    // console.log(b); // b is not defined


    // 4.点击按钮输出下标
    var oBtn = document.getElementsByTagName('button');
    // for(var i = 0; i < oBtn.length; i++){
    //     oBtn[i].onclick = function(){
    //         console.log(i); // 自身作用域中没有i，找的是for循环结束后的i，都是4
    //     }
    // }
    // console.log(i); // 4

    // let声明的是块级变量
    for(let i = 0; i < oBtn.length; i++){
        oBtn[i].onclick = function(){
            console.log(i); // 0 1 2 3
        }
    }

</script>